<template>
  <div class="wrapper">
    <ul class="list">
      <li :class="{reject:item.changeType == 6}" v-for="(item,index) in List" :key="index" @click="jump(item)">
        <div class="item">
          <div class="left">
            <p class="title">{{item.changeTitle}}</p>
            <p class="time">{{item.changeTimeStr}}</p>
          </div>
          <div class="right">
            <span class="positive" v-if="item.changeAmount > 0">+{{item.changeAmount}}元</span>
            <span class="negative" v-if="item.changeAmount < 0">{{item.changeAmount}}元</span>
            <img v-if="item.showArrow" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="arrow">
          </div>
          <img v-if="item.changeType == 6" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/bohui@2x.png" class="rejectImg">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {

    data() {
      return {
        List: [],
        page: 1,
      }
    },
    onUnload() {
      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {
      this.List = []
      this.page=1
      this.getDataList(1)
    },
    onReachBottom() {
      this.getDataList(this.page)
    },
    methods: {
      jump(item) {
        if (item.showArrow) {
          wx.navigateTo({
            url: `../ensureDetail/main?withdrawApplicationId=${item.withdrawApplicationId}`
          })
        }
      },
      getDataList(page) {
        let params = {
          pageNum: page,
          pageSize: 10
        }
        Service.getBondLog(params).then((res) => {
            if (res.code == 200) {
              if (res.data.logs) {
                var arr = this.List
                for (var i = 0; i < res.data.logs.length; i++) {
                  arr.push(res.data.logs[i])
                }
                this.List = arr
                this.List.forEach((item) => {
                  let types = [3,4,6]
                  if (types.includes(item.changeType)) {
                    item.showArrow = true
                  } else {
                    item.showArrow = false
                  }
                })
                if (res.data.logs.length > 0) {
                  this.page++;
                }
              }
            }
          })
      },
    }
  }
</script>

<style scoped>
  .list li{
    height: 130px;
    padding: 0 30px;
  }
  .item{
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    height: 128px;
    border-bottom: 2px solid #DDDDDD;
  }
  .title{
    font-size:30px;
    color:rgba(51,51,51,1);
    line-height:42px;
  }
  .time{
    padding-top: 10px;
    font-size:24px;
    color:rgba(153,153,153,1);
    line-height:33px;
  }
  .right{
    position: relative;
    padding-right: 42px;
    font-size:32px;
  }
  .arrow{
    position: absolute;
    right: 10px;
    top:50%;
    margin-top: -11px;
    width: 12px;
    height: 22px;
  }
  .positive{
    color: #2C9D23
  }
  .negative{
    color:#FF3939
  }
  .reject{
    position: relative;
    background:rgba(242,242,242,1);
  }
  .reject .right span{
    color: #999999;
  }
  .rejectImg{
    position: absolute;
    top: 30px;
    right:220px;
    width: 115px;
    height: 75px;
  }
</style>
